<template>
  <div class="container mx-auto p-4">
    <n-data-table :data="tableData"
                  striped
                  :remote="true"
                  :columns="columns"
                  :loading="loading"
                  :pagination="pagination"
                  max-height="600">

    </n-data-table>
  </div>
</template>

<script setup lang="ts">
import {h, ref} from "vue";
import {NTag} from 'naive-ui'

const tableData = ref([
  {
    id: 1,
    result: 0
  },
  {
    id: 2,
    result: 1
  }
])
const loading = ref(false)
const columns = ref([
  {title: '微博用户ID', key: 'id', width: 5, ellipsis: {tooltip: true}, align: 'center',},
  {
    title: '识别结果', key: 'result', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NTag, {
        type: row.result === 1 ? 'error' : 'success',
        size: 'large',
        round: true,
      }, row.result === 1 ? 'Robot' : 'Person')
    }
  },
])
const pagination = ref({
  pageNo: 1,
  pageSize: 15,
  showSizePicker: true,
  pageSizes: [5, 8, 15],
  itemCount: 0,
})

</script>

<style scoped>

</style>